
<!-- Content -->
<div id="content">

    <!-- Content wrapper -->
    <div class="wrapper">

        <!-- Breadcrumbs line -->
        <div class="crumbs">
            <ul id="breadcrumbs" class="breadcrumb"> 
                <li><a href="#">Panel</a></li>
                <li class="active"><a href="<?= base_url('colaborador') ?>" title="">Colaborador</a></li>
            </ul>
        </div>
        <!-- /breadcrumbs line -->

        <!-- Page header -->
        <div class="page-header">
            <div class="page-title">
                <h5>Añadir nuevo colaborador</h5>
                <span>CIEMPIESS-UNAM</span>
            </div>
        </div>
        <!-- /page header -->
        <?= @$upload_done ?>
        <?= @$mensaje ?>
        <div class="widget">
            <div class="navbar"><div class="navbar-inner"><h6>Nuevo Colaborador</h6></div></div>
            <div class="well row-fluid">

                <?= form_open_multipart('colaborador/altaColaborador', 'id="validate" class="form-horizontal"') ?> 
                <div class="control-group">
                    <label class="control-label">Nombre: <span class="text-error">*</span></label>
                    <div class="controls">
                        <input type="text" class="validate[required] span12" maxlength="45" name="nombre_col"  value="<?= @$nombre_col ?>" id="req" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Apellidos: <span class="text-error">*</span></label>
                    <div class="controls">
                        <input type="text" class="validate[required] span12" maxlength="45" name="apellido_col" value="<?= @$apellido_col ?>" id="req" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Carrera: <span class="text-error">*</span></label>
                    <div class="controls">
                        <input type="text" class="validate[required] span12" maxlength="45" name="carrera_col" value="<?= @$carrera_col; ?>" id="req" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Actividad: <span class="text-error">*</span></label>
                    <div class="controls">
                        <input type="text" class="validate[required] span12" maxlength="45" name="rol_col" value="<?= @$rol_col; ?>" id="req" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Subir Imagen:</label>
                    <div class="controls">
                        <input type="file" name="file_col" class="styled" id="req" required>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Periodo:</label> 
                    <div class="controls">
                        <select name="mesInicio" data-placeholder="Mes inicial..." id="clear-results-mi" tabindex="2" required>
                            <option></option>
                            <option value="1">Enero</option>
                            <option value="2">Febrero</option>
                            <option value="3">Marzo</option>
                            <option value="4">Abril</option>
                            <option value="5">Mayo</option>
                            <option value="6">Junio</option>
                            <option value="7">Julio</option>
                            <option value="8">Agosto</option>
                            <option value="9">Septiembre</option>
                            <option value="10">Octubre</option>
                            <option value="11">Noviembre</option>
                            <option value="12">Diciembre</option>
                        </select>
                        <select name="yearInicio" data-placeholder="Año inicial..." id="clear-results-yi" tabindex="2" required>
                            <option></option>
                            <?php for ($i = 2012; $i <= 2050; $i++) { ?>
                                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>

                            <?php } ?>
                        </select>
                        <span> hasta </span>
                        <select name="mesFin" data-placeholder="Mes final..." id="clear-results-mf" tabindex="2" required>
                            <option></option>
                            <option value="1">Enero</option>
                            <option value="2">Febrero</option>
                            <option value="3">Marzo</option>
                            <option value="4">Abril</option>
                            <option value="5">Mayo</option>
                            <option value="6">Junio</option>
                            <option value="7">Julio</option>
                            <option value="8">Agosto</option>
                            <option value="9">Septiembre</option>
                            <option value="10">Octubre</option>
                            <option value="11">Noviembre</option>
                            <option value="12">Diciembre</option>
                        </select>
                        <select name="yearFin" data-placeholder="Año final..." id="clear-results-yf" tabindex="2" required>
                            <option></option>
                            <?php for ($i = 2012; $i <= 2050; $i++) { ?>
                                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>

                            <?php } ?>
                        </select>
                    </div>
                </div>    

                <div class="control-group">
                    <label class="control-label">Posicion: </label>
                    <div class="controls">
                        <input type="text" class="span12" maxlength="5" name="posicion_col" value="<?= @$posicion_col; ?>" id="txtNumbers"/>
                    </div>
                </div>

                <div class="form-actions align-right">
                    <input name="altaColaborador" type="submit" class="btn btn-info" value="Guardar" id="botonGuardar">
                </div>

                <?= form_close() ?>

            </div>
        </div>

    </div>
</div>
<!-- /content -->


<script>
    $("#clear-results-mi").select2({
        placeholder: "Mes inicial...",
        allowClear: true
    });
    $("#clear-results-yi").select2({
        placeholder: "Año inicial...",
        allowClear: true
    });
    $("#clear-results-mf").select2({
        placeholder: "Mes final...",
        allowClear: true
    });
    $("#clear-results-yf").select2({
        placeholder: "Año final...",
        allowClear: true
    });
</script>
<script>
    $(document).ready(function () {
        $("#txtNumbers").keydown(function (event) {
            if (event.shiftKey) {
                event.preventDefault();
            }

            if (event.keyCode == 46 || event.keyCode == 8) {
            }
            else {
                if (event.keyCode < 95) {
                    if (event.keyCode < 48 || event.keyCode > 57) {
                        event.preventDefault();
                    }
                }
                else {
                    if (event.keyCode < 96 || event.keyCode > 105) {
                        event.preventDefault();
                    }
                }
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('#clear-results-yf,#clear-results-mf').change(function () {
            var anoi = $('#clear-results-yi').val();
            var anof = $('#clear-results-yf').val();
            var mesi = $('#clear-results-mi').val();
            var mesf = $('#clear-results-mf').val();

            if (anoi > anof) {
                $('#botonGuardar').prop('disabled', true);
                console.log('año inicial mayor que el final');
            } else {
                console.log('año inicial menor o igual');
                if (mesi <= mesf) {
                    $('#botonGuardar').prop('disabled', false);
                }
                else {
                    $('#botonGuardar').prop('disabled', true);
                }
            }
        });
    });
</script>
